<template>
  <div class="musicHouse fill">
    <div class="title">热门歌手</div>
    <AlbumUnit v-for="singer in singerList" :meta="singer" :key="singer.mid"/>
  </div>
</template>

<script lang="ts">
import {Component} from "vue-property-decorator"
import Vue from "vue"
import {qqMusicApi} from "@/network/qqmusic";
import AlbumUnit from "@/components/albumUnit/AlbumUnit.vue";
import {Singer} from "@/ts.d/classes/Singer";

@Component({
  components: {AlbumUnit}
})
export default class MusicHouse extends Vue {
  singerList: Singer[] = []


  fetchBaseData() {
    qqMusicApi.getSingerList().then((ret: any)=>{
      this.singerList = ret.data.list.map((item: any) => new Singer(item.singer_name, item.singer_mid))
    })
  }

  mounted() {
    this.fetchBaseData()
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/css/var";

  .musicHouse{
    overflow-y: auto;
    .title{
      padding: $pn;
      font-size: 30px;
      font-weight: 600;
    }
  }
</style>
